<template>
  <div class="table">
    <div class="tableel-table">
      <div class="elcol" v-for="(nav, index) in navs" :key="index">
        <span
          style="
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 20px;
            color: rgba(156, 159, 167, 1);
            text-align: left;
            vertical-align: top;
          "
          >{{ nav.InputEvent }}</span
        >
        <span
          style="
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 48px;
            color: rgba(3, 3, 2, 1);
            text-align: left;
            vertical-align: top;
          "
        >
          {{ nav.item }}</span
        >
      </div>
    </div>
  </div>
</template>

<script setup>
const navs = [
  {
    InputEvent: "InputEvent",
    item: "0",
  },
  {
    InputEvent: "tableEvent",
    item: "0",
  },
  {
    InputEvent: "EacthrsEvent",
    item: "0",
  },
  {
    InputEvent: "SiteEvent",
    item: "0",
  },
];
</script>

<style scoped>
.table {
  width: 767px;
  height: auto;
  display: grid;
  justify-items: center;
  background-color: #fff;
  border-radius: 10px;
}
.tableel-table {
  width: 663px;
  height: 72px;
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;

  /* background-color: red; */
  justify-content: space-between;
}
.elcol {
  width: auto;
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
</style>
